@import './_vars.scss';

.xdh-map-overview {
  box-shadow: $--shadow-base;
  transition: all 0.3s;
  .ol-overviewmap, .ol-overviewmap-map {
    width: 100%;
    height: 100%;
  }
  .ol-selectable {
    border: 2px solid $--overview-selectable-color;
  }
  button {
    display: none;
  }


  &__trigger {
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: $--border-radius;
    cursor: pointer;
    line-height: 26px;
    overflow: hidden;
    :hover {
      opacity: 0.5;
    }
    i {
      font-size: 30px;
      text-align: center;
      transform: translateX(-4px);
      display: inline-block;
    }
  }

  &__map {
    padding: 5px;
    display: none;
  }

  &.expand {
    .xdh-map-overview__map {
      display: block;
    }
    .xdh-map-overview__trigger {
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: $--overview-trigger-color-light;
    }
    &.is-dark {
      .xdh-map-overview__trigger {
        background: $--overview-trigger-color-dark;
      }
    }
    &.left-bottom .xdh-map-overview__trigger {
      left: 10px;
      bottom: 10px;
    }
    &.right-top .xdh-map-overview__trigger {
      right: 10px;
      top: 10px;
    }
    &.left-top .xdh-map-overview__trigger {
      left: 10px;
      top: 10px;
    }
  }

}